<template>
  <section>
    <div class="wrapper">
      <div class="title">
        <h2>{{ categoryname }}</h2>
<!--        <i @click="search = !search" :class="search ? 'close' : ''"></i>-->

      </div>
      <div class="search" v-show="search">
        <input type="text" placeholder="请输入关键字" v-model="keyword" />
        <img src="@/mobile/imgs/search.png" alt="" @click="query()" />
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="onLoad"
      >
        <ul>
          <li
            :class="caseObj"
            v-for="(item, index) in proposalList"
            :key="index"
            @click="$troute.query('mpDetail', item.id)"
          >
            <p>{{ item.reason }}</p>
          </li>
        </ul>
      </van-list>
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);

export default {
  data() {
    return {
      category: "", //提案类别id
      categoryname: "", //提案类别name
      proposalList: [], //提案列表
      count: 0,
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 10,
        grade: '' //提案类别id
      },
      caseObj: { case1: false, case2: false },
      search: false,
      keyword: "",
    };
  },
  mounted() {
    if(this.$route.query.tdata){
      let str = this.$route.query.tdata;
      let arr = JSON.parse(str);
      this.category = arr[0];
      this.categoryname = arr[1];
      // 提案类型id

      this.params.grade= arr[0]=='0'?'':arr[0];
      if (this.categoryname == "优秀提案") {
        this.caseObj.case1 = true;
      } else if (this.categoryname == "其他提案") {
        this.caseObj.case2 = true;
      }
    }else{
      delete this.params.grade
      this.categoryname='本届教代会提案'
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      let data={
        reason: this.keyword
      }
      if(this.params.hasOwnProperty('grade')){
        api.myProposalList(this.params).then((res) => {
          this.count = res.count;
          this.proposalList.push(...res.data);
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.proposalList.length == this.count) {
            this.finished = true;
          } else {
            this.params.page++;
          }
        });
      }else{
        api.CDRTGetList(this.params).then((res) => {
          this.count = res.count;
          this.proposalList.push(...res.data);
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (this.proposalList.length == this.count) {
            this.finished = true;
          } else {
            this.params.page++;
          }
        });
      }
    },
    // 检索
    query() {
      if(this.keyword){
          this.onLoad()
      }
    },
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 25px 20px;
  .title {
    margin-bottom: 25px;
    h2 {
      position: relative;
      display: inline-block;
      font-size: 24px;
      z-index: 1;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        height: 5px;
        background-color: #c9151e;
        z-index: -1;
      }
    }
    i {
      float: right;
      width: 22px;
      height: 23px;
      margin-top: 4px;
      background: url(../imgs/search.png) no-repeat;
      background-size: contain;
      opacity: 0.6;
    }
    .close {
      width: 15px;
      height: 15px;
      background-image: url(../imgs/close.png);
    }
  }
  .search {
    position: absolute;
    top: 104px;
    left: 0;
    right: 0;
    padding: 28px 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px #f1f1f1;
    z-index: 999;
    input {
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      background-color: #eee;
      border-radius: 5px;
      box-sizing: border-box;
    }
    img {
      position: absolute;
      top: 42px;
      right: 35px;
      height: 22px;
    }
  }
  ul li {
    margin-bottom: 12px;
    padding: 0 0 12px 25px;
    border-bottom: 1px solid #eee;
    background: url(../imgs/icon-1.png) no-repeat left 5px;
    background-size: 15px auto;
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-height: 1.5em;
      font-size: 16px;
    }
    &.case1 {
      background-image: url(../imgs/icon-2.png);
    }
    &.case2 {
      background-image: url(../imgs/icon-3.png);
    }
  }
}
</style>
